<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/lib/css/clothes_list.css">
</head>

<body>
<div class="outest" style="margin:0 auto; width: 90%; height:820px; margin-top:40px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <div id="app">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1"><a href="/clothes_index_page">首页</a></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">用户管理</template>
                        <el-menu-item index="2-1"><a href="/user_list_page">所有用户</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">服装管理</template>
                        <el-menu-item index="3-1"><a href="/clothes_list_page">所有服装</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">仓库管理</template>
                        <el-menu-item v-for="item, index in authinstocks" :index="item.id">
                            {{item.name}}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right">
                        <template slot="title"><el-avatar :src="imgUrl"></el-avatar>&nbsp;我</template>
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">退出</el-menu-item>
                    </el-submenu>
                    <div style="clear: both"></div>
                </el-menu>
            </el-header>

            <el-main>
                <el-page-header @back="goBack" content="">
                </el-page-header>
                <div style="width: 60%; margin-left: 22%; margin-top: 50px">
                    <template>
                        <el-form :label-position="labelPosition" ref="nihao" label-width="80px" :model="formData">
                            <el-form-item label="货号" prop="citem">
                                <el-input v-model="formData.citem" placeholder="请填写货号，a201908523"></el-input>
                            </el-form-item>
                            <el-form-item label="品名" prop="cname">
                                <el-input v-model="formData.cname" placeholder="请填写品名，捷豹夹克"></el-input>
                            </el-form-item>
                            <el-form-item label="色号" prop="clrnum">
                                <el-input v-model="formData.clrnum" placeholder="请填写色号，F0F0F0"></el-input>
                            </el-form-item>
                            <el-form-item label="尺码" prop="size">
                                <el-input v-model.number="formData.size" placeholder="请填写尺码，170"></el-input>
                            </el-form-item>
                            <el-form-item label="面料" prop="fabric">
                                <el-input v-model="formData.fabric" placeholder="请填写面料，塑料"></el-input>
                            </el-form-item>
                            <el-form-item label="出厂价格" prop="citem">
                                <el-input v-model.number="formData.out_price" placeholder="请填写出厂价格，200.00"></el-input>
                            </el-form-item>
                            <el-form-item label="零售价格" prop="sell_price">
                                <el-input v-model.number="formData.sell_price" placeholder="请填写零售价格，300.00"></el-input>
                            </el-form-item>
                            <el-form-item label="里料" prop="material">
                                <el-input v-model="formData.material" placeholder="请填写里料，海绵"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click.native="addclothes()">添加</el-button>
                                <el-button @click.native="resetForm('nihao')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </div>
            </el-main>

            <el-footer>
                版权所有 &nbsp;&nbsp;&nbsp;&nbsp; <el-link type="info">www.huangyt.com</el-link>
            </el-footer>

        </el-container>
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            activeIndex: '3-1',
            labelPosition: 'right',
            account:'',
            authinstocks:[],
            imgUrl:'',
            id:'',
            formData: {
                citem: '',
                cname: '',
                clrnum:'',
                size: '',
                fabric:'',
                out_price:'',
                sell_price:'',
                material:'',
            }

        },
        mounted: function () {
            this.getuser();
        },
        methods:{
            addclothes: function(){
                console.log(JSON.stringify(this.formData));
                var obj = this;
                var url = "clothes/add";
                axios.post(url, this.formData).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        vue.jump("clothes_list_page");
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },

            handleSelect: function(key, keyPath) {
                console.log(key, keyPath);
                if(keyPath[0]==4){
                    window.location.href = "instock_list_page?depotid=" + key;
                }
                if(key=="5-1"){
                    var url = "user_center_page?id=" + this.id;
                    window.location.href = url;
                }
                if(key=="5-2"){
                    this.logout();
                }
            },
            logout: function () {
                var obj = this;
                var url = "login/out";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '登出成功!'
                        });
                        vue.jump("login_page");
                    }else {
                        console.log("登出失败");
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },
            getuser: function(){
                var obj = this;
                var url = "login/getuser";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        var id = res.data.id;
                        var time = new Date().getTime();
                        vue.id = res.data.id;
                        vue.account = res.data.account;
                        vue.imgUrl = "images/user/" + id + ".jpg?timestamp=" + time;
                        console.log("this.imgUrl:" + vue.imgUrl);
                        vue.getauthinstock(vue.account);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            getauthinstock: function(account){
                console.log("account:" + account);
                var obj = this;
                var url = "login/getauthorInstock/" + account;
                console.log("url:" + url)
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.authinstocks = res.data;
                        console.log("vue.authinstocks:" + vue.authinstocks);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            //表单
            submitForm: function(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            jump: function(url){
                setInterval(function () {
                    window.location.href = url;
                }, 1000);
            },
            resetForm: function(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                history.back();
            }


        }
    })
</script>
</body>
</html>